<!-- backend/templates/data_upload.html -->
{% extends "base.html" %}

{% block content %}
    <!-- 页面标题 -->
    <h2 class="mb-4">数据上传</h2>
    <div class="row justify-content-center">
        <div class="col-md-6">
            <!-- 上传表单 -->
            <form id="uploadForm" enctype="multipart/form-data">
                <div class="mb-3">
                    <!-- 文件选择标签 -->
                    <label for="dataFile" class="form-label">选择数据文件（.csv）</label>
                    <!-- 文件输入框，接受csv文件 -->
                    <input type="file" class="form-control" id="dataFile" accept=".csv" required>
                </div>
                <!-- 上传按钮 -->
                <button type="submit" class="btn btn-primary w-100">上传数据</button>
            </form>
            <!-- 显示消息的区域 -->
            <div id="message" class="mt-3"></div>
            <!-- 加载状态显示 -->
            <div id="loading" class="text-center" style="display: none;">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">上传中...</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 上传文件列表 -->
    <div class="row justify-content-center mt-5">
        <div class="col-md-8">
            <h3>已上传的文件</h3>
            <!-- 文件列表表格 -->
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>文件名</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="uploadedFilesTableBody">
                    <!-- 上传文件列表将被列在此处 -->
                </tbody>
            </table>
        </div>
    </div>

    <script>
        // 等待文档完全加载
        document.addEventListener('DOMContentLoaded', () => {
            // 获取DOM元素
            const uploadForm = document.getElementById('uploadForm'); // 获取上传表单
            const messageDiv = document.getElementById('message'); // 消息显示区域
            const loadingDiv = document.getElementById('loading'); // 加载状态区域
            const uploadedFilesTableBody = document.getElementById('uploadedFilesTableBody'); // 文件列表区域

            // 处理表单提交事件
            uploadForm.addEventListener('submit', async (e) => {
                e.preventDefault(); // 阻止表单默认提交行为
                const dataFile = document.getElementById('dataFile').files[0]; // 获取文件输入框中的文件

                // 检查文件是否存在
                if (!dataFile) {
                    messageDiv.innerHTML = `<div class="alert alert-warning">请选择一个文件进行上传。</div>`;
                    return;
                }

                const formData = new FormData(); // 创建FormData对象，用于上传文件
                formData.append('file', dataFile); // 将文件添加到FormData对象中

                try {
                    loadingDiv.style.display = 'block'; // 显示加载状态
                    messageDiv.innerHTML = ''; // 清空消息区域

                    // 向服务器发送文件上传请求
                    const response = await fetch('/api/data/import', {
                        method: 'POST', // 使用POST方法
                        credentials: 'include', // 包含凭据
                        body: formData // 发送的请求体
                    });

                    let data;
                    try {
                        data = await response.json(); // 解析响应为JSON格式
                    } catch (e) {
                        console.error('解析响应为 JSON 失败:', e); // 处理解析错误
                        data = null; // 解析失败则设为null
                    }

                    loadingDiv.style.display = 'none'; // 隐藏加载状态

                    // 检查响应状态
                    if (response.ok) {
                        // 上传成功，显示成功消息
                        if (data && data.message) {
                            messageDiv.innerHTML = `<div class="alert alert-success">${data.message}</div>`;
                        } else {
                            messageDiv.innerHTML = `<div class="alert alert-success">文件上传成功。</div>`;
                        }
                        uploadForm.reset(); // 重置上传表单
                        loadUploadedFiles(); // 重新加载已上传文件列表
                    } else {
                        // 上传失败，显示错误消息
                        if (data && data.message) {
                            messageDiv.innerHTML = `<div class="alert alert-danger">${data.message}</div>`;
                        } else {
                            messageDiv.innerHTML = `<div class="alert alert-danger">文件上传失败，请重试。</div>`;
                        }
                    }
                } catch (error) {
                    loadingDiv.style.display = 'none'; // 隐藏加载状态
                    console.error('文件上传时发生错误:', error); // 处理其他错误
                    messageDiv.innerHTML = `<div class="alert alert-danger">文件上传失败，请重试。</div>`;
                }
            });

            // 加载上传的文件列表
            const loadUploadedFiles = async () => {
                try {
                    // 向服务器请求已上传文件列表
                    const response = await fetch('/api/data/uploaded_files', {
                        method: 'GET', // 使用GET方法
                        credentials: 'include' // 包含凭据
                    });
                    const data = await response.json(); // 解析响应为JSON格式
                    if (response.ok) {
                        uploadedFilesTableBody.innerHTML = ''; // 清空文件列表区域
                        // 遍历已上传的文件并生成表格行
                        data.uploaded_files.forEach(file => {
                            const row = document.createElement('tr'); // 创建新行
                            row.innerHTML = `
                                <td>${file.file_name}</td>
                                <td>${file.created_at}</td>
                                <td>
                                    <button class="btn btn-sm btn-danger" onclick="deleteUploadedFile(${file.id})">删除</button>
                                </td>
                            `;
                            uploadedFilesTableBody.appendChild(row); // 将新行添加到表格
                        });
                    } else {
                        uploadedFilesTableBody.innerHTML = `<tr><td colspan="3" class="text-danger">无法加载上传文件列表。</td></tr>`;
                    }
                } catch (error) {
                    console.error('加载上传文件列表失败:', error); // 处理加载错误
                    uploadedFilesTableBody.innerHTML = `<tr><td colspan="3" class="text-danger">加载上传文件列表时发生错误。</td></tr>`;
                }
            };

            // 删除上传文件的函数
            window.deleteUploadedFile = async (fileId) => {
                if (!confirm(`确定要删除上传的文件 ID ${fileId} 吗？`)) return; // 确认删除操作

                try {
                    // 向服务器发送删除请求
                    const response = await fetch(`/api/data/uploaded_files/delete/${fileId}`, {
                        method: 'DELETE', // 使用DELETE方法
                        credentials: 'include' // 包含凭据
                    });
                    const data = await response.json(); // 解析响应为JSON格式
                    if (response.ok) {
                        messageDiv.innerHTML = `<div class="alert alert-success">${data.message}</div>`; // 显示成功消息
                        loadUploadedFiles(); // 重新加载已上传文件列表
                    } else {
                        messageDiv.innerHTML = `<div class="alert alert-danger">${data.message}</div>`; // 显示错误消息
                    }
                } catch (error) {
                    console.error('删除上传文件失败:', error); // 处理删除错误
                    messageDiv.innerHTML = `<div class="alert alert-danger">删除上传文件失败，请重试。</div>`;
                }
            };

            // 初始加载上传文件列表
            loadUploadedFiles(); // 调用函数以加载文件列表
        });
    </script>
{% endblock %}
